<template>
  <div class="clearfix">
    <!-- 列表 -->
    <div class="index-model" v-loading="loading">
      <div class="list">
        <div
          class="item transition"
          v-for="(item, key) in list"
          :key="key"
          @click="link(item)"
        >
          <div class="user_info">
            <!-- collected followed 
            收藏了文章  
            取消关注了用户
            -->
            <div class="portrait">
              <el-avatar
                shape="square"
                :size="48"
                src="item.targetUrl"
              ></el-avatar>
            </div>
            <div class="info">
              <div class="account">{{ item.userName }}</div>
              <div class="createTime">
                {{ item.time | fmtDateTime }}
              </div>
            </div>
            <div class="action" v-html="actionHTML(item)"></div>
          </div>
        </div>
        <div class="no-data" v-if="!loading && !list.length">
          <el-empty description="暂无数据"></el-empty>
        </div>
      </div>
      <!-- <pagination @getList="getList" :form.sync="form"></pagination> -->
    </div>
    <!-- 详情 -->
    <detail
      v-if="detailVisible"
      :visible.sync="detailVisible"
      :id="id"
    ></detail>
  </div>
</template>

<script>
import Mixin from "@/mixins/list";
import apiCode from "@/api/apiConfig";

export default {
  name: "feeds",
  mixins: [Mixin],
  components: {},
  filters: "",
  data() {
    return {};
  },
  created() {
    // 获取列表
    this.getList();
    // 监听列表刷新事件
    this.$on("global:feedsFresh", (e) => {
      this.getList(e);
    });
  },
  methods: {
    async getList() {
      this.loading = true;
      let result = await this.$get(`api/user/feeds`);
      this.loading = false;
      if (result && result.code === apiCode.code.success) {
        this.list = result.data.filter((item) => item.actionContent);
      }
    },
    actionHTML(actions) {
      // action 1发布文章 2收藏了文章 3取消关注
      let { actionContent, action, userId } = actions;
      let str = "";
      switch (action) {
        case "1":
          // 发布文章
          str = `发布了文章<span style="color:#409EFF" >《${actionContent.title}》</span>`;
          break;
        case "2":
          str = `收藏了文章<span style="color:#409EFF">《${actionContent.title}》</span>`;
          break;
        case "3":
          str = `关注了用户<span style="color:#409EFF">${userId}</span>`;
          break;
        default:
      }
      return str;
    },
    // 详情 文章来源类型：sourceType：1 原创 ； 2 爬虫
    link(row) {
      if (row.action === "2") {
        window.open(row.actionContent.targetUrl, "_blank");
      } else if (row.action === "1") {
        this.$detail(row.actionContent.id);
      } else {
        //
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.index-model {
  .list {
    @include scroll-beautify(0, transparent, transparent, scroll);
    height: calc(100vh - 178px);

    .item {
      background-color: $white;
      position: relative;
      line-height: 24px;
      cursor: pointer;
      padding: 15px;

      & + .item:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 15px;
        height: 1px;
        background-color: $f5;
      }

      &:hover {
        background-color: $f9fafb;
      }

      .user_info {
        .portrait {
          height: 48px;
          float: left;
        }

        .info {
          padding-left: 58px;

          .account {
            font-size: 16px;

            .follow {
              background-color: $c1c1c1;
              display: inline-block;
              border-radius: 50px;
              text-align: center;
              line-height: 24px;
              font-size: 12px;
              cursor: pointer;
              color: $white;
              float: right;
              width: 80px;

              &.active {
                background-color: $mc;
              }
            }
          }
        }
      }

      .content {
        .title {
          font-weight: bold;
          font-size: 18px;
          margin: 10px 0;
        }

        .abstract {
          font-size: 12px;
          color: $cc;
        }

        .author {
          font-size: 12px;
          color: $ccc;

          > i {
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
